<html>
    <head>
        <title>Progress Bar with Dijit</title>

        <link rel="StyleSheet" type="text/css" href="../dojo-1.6.1/dijit/themes/claro/claro.css">
        <link rel="StyleSheet" type="text/css" href="../dojo-1.6.1/dojo/resources/dojo.css">
		<style type="text/css">
		div#main{width:490px;margin: 100px auto;}
		</style>

<script
	djConfig="parseOnLoad:true, isDebug:true" type="text/javascript" src="http://o.aolcdn.com/dojo/1.6/dojo/dojo.xd.js">
</script>
<script type="text/javascript" >
dojo.require("dijit.ProgressBar");
dojo.require("dijit.form.Button");     
dojo.require("dojo.parser");

dojo.addOnLoad(function progressBar() {
	var timer = 0;
	var progressInterval = setInterval(function(evt) {
	timer++;

	dijit.byId("downloadProgress").update({progress : timer,label:"Loading..."});
	
	if(timer > 99){
	  clearInterval(progressInterval);
	  dijit.byId("downloadProgress").update({label:"Done"});
	  show();
	}
	}, 1);
	
   
	 function show(){
	   var btn = dijit.byId('continue').domNode;
	   dojo.style(btn, {visibility:'visible'});
  }
  
});

</script>
    </head>
    <body class="claro">
        <div id="main">
            <div dojoType="dijit.ProgressBar" style="width:300px" 
            id="downloadProgress" maximum="10">
            </div>
            <br />
            <button id="continue" dojoType="dijit.form.Button" style="visibility:hidden" onclick="history.go(-1);">Back</button>
        </div>
    </body>
</html>
   
